<template>
    <div class="apply-table">
        <el-button type="primary" @click="submit">提交申请</el-button>
        <div class="table">
            <el-table height="500" :data="applyArr.list" style="width: 100%">
                <el-table-column prop="id" label="序号" align="center" sortable>
                </el-table-column>
                <el-table-column prop="username" label="申请用户" align="center">
                </el-table-column>
                <el-table-column prop="apyExplain" label="申请说明" align="center" width="300" show-overflow-tooltip
                    v-if="type == 0">
                </el-table-column>
                <el-table-column prop="apyExplain" label="申请项目" align="center" width="300" show-overflow-tooltip
                    v-if="type == 1">
                </el-table-column>
                <el-table-column prop="createdDt" label="申请时间" align="center" width="170">
                </el-table-column>
                <el-table-column prop="apyMaterial" label="申请资料" align="center" width="120" class="warning">
                    <template slot-scope="scope">
                        <el-button @click="handleDown(scope.row)" type="warning" size="mini">下载 资料</el-button>

                    </template>
                </el-table-column>
                <el-table-column prop="reviewStatus" align="center" width="100" label="审核状态">
                </el-table-column>
                <el-table-column prop="reviewExplain" align="center" label="审核说明" show-overflow-tooltip width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleRevoke(scope.row)" type="warning" size="mini"
                            v-if="scope.row.reviewStatus === '待审核'">撤销申请</el-button>
                        <el-button @click="handleEdit(scope.row)" v-if="scope.row.reviewStatus == '待审核'" type="primary"
                            size="mini">重新编辑</el-button>
                        <el-button @click="handleReapply(scope.row)"
                            v-if="scope.row.reviewStatus == '审核不通过' || scope.row.reviewStatus == '已撤销申请'" type="danger"
                            size="mini">重新申请</el-button>

                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="applyArr.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="applyArr.totals">
            </el-pagination>
            <!-- <Pagination :paginationData="applyArr"></Pagination> -->
        </div>
        <!-- <Dialog></Dialog> -->
    </div>
</template>
<script>
// import Pagination from '../../../components/pagination/index.vue'
// import Dialog from './dialog/index.vue'
export default {
    name: 'ApplyTable',
    components: {
        // Pagination,
        // Dialog
    },
    mixins: [],
    props: ['type', 'applyArr'],
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            isShow: true
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            const form = {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                type: this.type
            }
            this.$emit('getApplyData', form)
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            const form = {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                type: this.type
            }
            this.$emit('getApplyData', form)
        },
        handleRevoke(row) {
            this.$confirm('此操作将撤回申请, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj = {
                    id: row.id,
                    reviewStatus: 3
                }
                this.dataChange(obj)
                this.$message({
                    type: 'success',
                    message: '申请撤回成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleReapply(row) {
            this.$bus.$emit('isShow', true)
            this.$bus.$emit('editData', row)

        },
        handleEdit(row) {
            this.$bus.$emit('isShow', true)
            this.$bus.$emit('editData', row)

        },
        submit() {
            this.$bus.$emit('isShow', true)
        },
        handleDown(row) {
            const a = document.createElement("a");
            const event = new MouseEvent("click");
            a.download = row.attachmentName;
            a.href = row.apyMaterial;
            a.dispatchEvent(event)
        },
        dataChange(obj) {
            if (this.type == 0) {
                this.request.post('/poorApplyInfo/orderAdit', obj).then(res => {
                    if (res.code == 20000) {
                        this.$emit('getApplyData')
                    }
                })
            } else if (this.type == 1) {
                this.request.post('/projectApplyInfo/orderAdit', obj).then(res => {
                    if (res.code == 20000) {
                        this.$emit('getApplyData')
                    }
                })
            }
        }
    }
};
</script>
<style lang='less' scoped>
.apply-table {
    margin: 0 auto;

    .el-button--primary {
        background-color: #11a983;
    }

    h1 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .table {
        .warning {
            .el-button--warning {
                background-color: #f9b44c;
            }
        }

    }

    .pagination {
        margin-top: 5px;
    }
}
</style>